I followed a simple codepen (my version: https://codepen.io/naomimekeel/pen/rNzoeGQ) to build a js live search, but I need a way to display a "Sorry, no results found" message if the input doesn't match any of the list items. I know this is probably a simple event listener but I am not competent in javascript and can't find any answers that match this specific way of filtering. What is the best way to do this?
<div class="facstaffsearchbar">
<input type="text"
id="facstaff-search"
name="facstaff-search"
rel="facstaff-search"
placeholder="๐ Search for a donor on this list . . ."
/>
<div rel="facstaff-data" id="facstaff-data">
<div class="facstaff-data-item">+Terry Laughlin KGSB โ81 & Regina L. Aldisert<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Dr. W. Harry Archer, DEN โ27, A&S โ37 & +Mrs. Louise E. Archer, A&S โ27<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Lauren H. Ashe, A&S โ14<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+William R. Baierl, EDUC โ51<span style="display:none!important;">Bill, Willy</span></div>
<div class="facstaff-data-item">Bettye J. Bailey, CGS โ84 & +Ralph E. Bailey<span style="display:none!important;"></span></div>
</div>
const searchInput = document.querySelector('input[rel="facstaff-search"]');
searchInput.addEventListener('input', function (event) {
const input = event.target;
const query = event.target.value;
const results = input.parentNode;
const data = results.querySelectorAll(".facstaff-data-item");
if (input.value)
{
for (let i = 0, len = data.length; i < len; i++)
{
data[i].innerHTML.toLowerCase().includes(input.value.toLowerCase()) ? data[i].style.display = 'block' : data[i].style.display = 'none';
}
}
else {
for (let i = 0, len = data.length; i < len; i++)
{
data[i].style.display = 'block';
}
}
});
So add a check to see if you have any. And you really should use ternary to return a value, not as an if/else
let hasMatches = false;
if (input.value) {
const textLC = input.value.toLowerCase();
for (let i = 0, len = data.length; i < len; i++) {
const dataMatch = data[i].innerHTML.toLowerCase().includes(textLC);
data[i].style.display = dataMatch ? 'block' : 'none';
hasMatches = hasMatches || dataMatch;
}
if (!hasMatches) {
console.log('NOPE');
}
}
You could do something like this, create a variable to check whether there are any matches or not, if any update the variable
let foundOne = false;
const none = document.getElementById('none');
const searchInput = document.querySelector('input[rel="facstaff-search"]');
const data = document.querySelectorAll(".facstaff-data-item");
show(false);
searchInput.addEventListener('input', function (event) {
// reset state
show(false)
foundOne = false;
const input = event.target
if (input.value) {
const toMatch = input.value.toLowerCase();
for (let i = 0, len = data.length; i < len; i++) {
const match = data[i].innerHTML.toLowerCase().includes(toMatch);
data[i].style.display = match ? 'block' : 'none';
if (match) foundOne = true;
}
if (!foundOne) show(true);
} else
resetState()
});
function resetState() {
for (let i = 0, len = data.length; i < len; i++)
data[i].style.display = 'block';
}
function show(bool) {
none.style.display = bool ? 'block' : 'none';
}<div class="facstaffsearchbar">
<input type="text"
id="facstaff-search"
name="facstaff-search"
rel="facstaff-search"
placeholder="๐ Search for a donor on this list . . ."
/>
<div id="none">sorry no results found</div>
<div rel="facstaff-data" id="facstaff-data">
<div class="facstaff-data-item">+Terry Laughlin KGSB โ81 & Regina L. Aldisert<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Dr. W. Harry Archer, DEN โ27, A&S โ37 & +Mrs. Louise E. Archer, A&S โ27<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+Lauren H. Ashe, A&S โ14<span style="display:none!important;"></span></div>
<div class="facstaff-data-item">+William R. Baierl, EDUC โ51<span style="display:none!important;">Bill, Willy</span></div>
<div class="facstaff-data-item">Bettye J. Bailey, CGS โ84 & +Ralph E. Bailey<span style="display:none!important;"></span></div>
</div>
</div>